<template>
  <el-form class="right-event-rank-friend">
    <el-divider content-position="center">好友数据</el-divider>
    <input-normal label="排行关联id" v-model="wbData.relateCompId" @change="onUpdateWbComponent"></input-normal>
    <dropdown-normal v-model="wbData.rankType" :valLists="FRIEND_RANK_TYPES" label="好友接口类型" :bIsBtn="false" @change="onUpdateWbComponent" ></dropdown-normal>
    <el-button type="primary"  class="margin-left-right-16 margin-bottom-10" @click.stop="onAddWbItem"><el-icon><i class="jy-icon-plus"></i></el-icon>添加数据项</el-button>
    <p class="margin-left-right-16 red">下面的数据项只是为了布局UI，在移动端预览的时候会填充真实的数据</p>
    <el-collapse v-model="activeNames">
      <el-collapse-item v-for="(item, index) in eventWbLists" :key="'drag_' + index" :name="index+1" class="list-group-item">
        <template #title>
          好友{{DIGIT_MAP[index]}}<i class="jy-icon-delete el-collapse-item__arrow" @click.stop="onDeleteWbItem($event, index)"></i>
        </template>
        <input-normal label="uid" v-model="item.uid" @change="onUpdateWbItem(index)"></input-normal>
      </el-collapse-item>
    </el-collapse>
  </el-form>
</template>

<script>
import InputNormal from '@/views/components/edit/InputNormal.vue'
import DropdownNormal from '@/views/components/edit/DropdownNormal.vue'

import { DIGIT_MAP } from '@/common/const'
import { FRIEND_RANK_TYPES } from '@/common/const-general'

import { mapState, mapActions } from 'vuex'
import { addUtils } from '@/views/js/add-utils'

  export default {
    mixins: [addUtils],
    setup () {
      return {
        DIGIT_MAP: DIGIT_MAP,
        FRIEND_RANK_TYPES: FRIEND_RANK_TYPES
      }
    },
    components: {
      InputNormal,
      DropdownNormal
    },
    computed:{
      ...mapState({
      }),
    },
    methods:{
      ...mapActions({
      }),
    },
  }
</script>
